<!doctype html>
<html lang="zh-CN">
<head>
	<!-- 必须的 meta 标签 -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Bootstrap 的 CSS 文件 -->
	<link rel="stylesheet" href="/static/bootstrap.css">
	<link rel="icon" href="/static/logo.png">

	<title>年假调休</title>
	<style>
		th, td {
			text-align: center;
		{#min-width: 100px;#}
		}
	</style>

</head>
<body>


<div class="container mt-3">
	<div class="row">
		<div class="col text-center">
			<img src="/static/logo.png" height="48" alt="">
			<span class="h1" style="
				position: relative;top: 10px">

				{% if lang == 'zh' %}
					员工年假查询
				{% else %}
					Employee Annual Leave Query
				{% endif %}

			</span>
		</div>
	</div>
</div>

<div class="container mt-3">
	<div class="row">
		<div class="col mx-auto" style="max-width: 600px">
			<form action="/" method="get">
				<div class="input-group mb-3">
					<input type="number" class="form-control" placeholder="请输入工号"
					       aria-describedby="input" name="employee_number"
					       value="{{ employee_number }}">

					<input type="text" value="{{ lang }}" style="display: none" name="lang">

					<button class="btn btn-outline-info" type="submit" id="input">
						{% if lang == 'zh' %}
							搜索
						{% else %}
							search
						{% endif %}
					</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="container mt-3">
	<div class="row">
		<div class="col text-center h3 text-black-50">
			{% if lang == 'zh' %}
				数据更新时间:
			{% else %}
				Data update time:
			{% endif %}
			{{ update_time }}
		</div>
	</div>
</div>

{% if employee_number %}

	{% if html_annual_leave %}
		<div class="container mt-3">
			<div class="row">
				<div class="col text-center">
					<h3>
						{% if lang == 'zh' %}
							年假(天)
						{% else %}
							Annual Leave
						{% endif %}
					</h3>
				</div>
			</div>

			<div class="row">
				<div class="col table-responsive text-nowrap">
					{{ html_annual_leave | safe }}
				</div>
			</div>
		</div>
	{% else %}
		<div class="container mt-3">
			<div class="row">
				<div class="col text-center h4 text-warning">
					年假表查不到数据
				</div>
			</div>
		</div>
	{% endif %}

	{% if html_flexible %}
		<div class="container mt-3">
			<div class="row">
				<div class="col text-center">
					<h3>
						{% if lang == 'zh' %}
							调休(小时)
						{% else %}
							Flexible Hours
						{% endif %}
					</h3>
				</div>
			</div>
			<div class="row">
				<div class="col table-responsive text-nowrap">
					{{ html_flexible | safe }}
				</div>
			</div>
		</div>
	{% else %}
		<div class="container mt-3">
			<div class="row">
				<div class="col text-center h4 text-warning">
					调休表查不到数据
				</div>
			</div>
		</div>
	{% endif %}

{% endif %}

<button class="btn btn-outline-dark" style="position: fixed;right: 30px;top: 30px" onclick="toggle_lang()">English
</button>

<script>
  function toggle_lang() {
    let element_number = document.getElementsByName('employee_number')[0]
    let employee_number = element_number.value

    let element_lang = document.getElementsByName('lang')[0]
    let lang = element_lang.value

    if (lang === 'zh') {
      element_lang.value = 'en'
    } else {
      element_lang.value = 'zh'
    }
    lang = element_lang.value

    window.location.href = '/?employee_number=' + employee_number + '&lang=' + lang
  }

</script>

</body>
</html>